<template>
  <div class="import-export-page">
    <el-card class="import-export-card">
      <div class="import-export-header">
        <span class="import-export-title">配置文件导入与导出</span>
      </div>

      <div class="import-export-body">
        <!-- 导出配置文件 -->
        <el-button @click="exportConfig" type="primary" style="width:100%">
          导出配置文件
        </el-button>

        <el-divider />

        <!-- 导入配置文件 -->
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :before-upload="beforeUpload"
          :on-change="handleFileChange"
          accept=".json"
          :show-file-list="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">点击或拖动文件到这里进行上传</div>
        </el-upload>

        <div v-if="importedConfig" class="imported-config">
          <p>已成功导入配置文件！</p>
          <el-button size="small" type="success" @click="applyConfig">应用配置</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 当前大屏数据（模拟）
const screenData = ref({
  name: '生产大屏',
  components: ['KPI卡片', '图表', '地图'],
  theme: '深色',
  layout: {
    components: [
      { type: 'chart', x: 60, y: 60, width: 400, height: 250, data: [120, 200, 150] },
      { type: 'kpi', x: 500, y: 60, width: 180, height: 80, value: 1000, label: 'KPI Value' },
    ],
  },
})

const importedConfig = ref(null)

const router = useRouter()
const route = useRoute()

// 导出配置文件
function exportConfig() {
  const json = JSON.stringify(screenData.value.layout)
  const blob = new Blob([json], { type: 'application/json' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `${screenData.value.name}-config.json`
  link.click()
  ElMessage.success('配置文件已导出！')
}

// 导入配置文件
function beforeUpload(file) {
  const isJson = file.type === 'application/json'
  if (!isJson) {
    ElMessage.error('只能导入 JSON 文件')
  }
  return isJson
}

function handleFileChange(file, fileList) {
  const reader = new FileReader()
  reader.onload = () => {
    try {
      const config = JSON.parse(reader.result)
      importedConfig.value = config
      ElMessage.success('配置文件已导入！')
    } catch (err) {
      ElMessage.error('导入文件格式错误！')
    }
  }
  reader.readAsText(file.raw)
}

// 应用导入的配置文件
function applyConfig() {
  if (importedConfig.value) {
    screenData.value.layout = importedConfig.value
    ElMessage.success('已应用配置！')
  }
}

function goBack() {
  router.push({ name: 'ScreenList' })
}
</script>

<style scoped>
.import-export-page {
  padding: 24px;
  background: #f7f8fa;
}

.import-export-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
}

.import-export-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.import-export-title {
  font-size: 20px;
  font-weight: 600;
}

.upload-demo i {
  font-size: 28px;
  color: #409eff;
}

.el-upload__text {
  color: #409eff;
}

.imported-config {
  margin-top: 20px;
}
</style>
